<template>  
    <div class="danmu-container">  
        <!-- :style="{ animationDuration: `${messageDuration}s` }"  -->

        <div
            v-for="(item, index) in messages"  
            :key="index"  
            class="danmu"  
            :ref="setItemRef"
        >
            {{ item.text }}
        </div>
    </div>  
</template>  
    
<script lang="ts" setup>  
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, watchEffect  } from 'vue'
    import type { Ref, Raw } from 'vue'
    const props = withDefaults(defineProps<{
        messages?: any[],
        messageDuration: number
    }>(), {
        messages: () => [],
        messageDuration: 10
    })

    // 用于存储 refs 的数组
    const itemRefs: Ref<any[]> = ref([]);
    // 设置 ref 的函数
    const setItemRef = el => {
        if (el) {
            console.log(el)
            itemRefs.value.push(el);
        }
    };
    let mywidth = 0
    const ita: Ref<any> = ref('')
    const myf = () => {
        let mywidth = 0
        if (ita.value) {
            clearInterval(ita.value)
        }
        ita.value = setInterval(() => {
            itemRefs.value.forEach((item, index) => {
                mywidth += item.offsetWidth
                console.log(mywidth)

                // item.style.right第一次是没有的
                if (parseInt(item.style.right)) {
                    item.style.right = parseInt(item.style.right) + 10 + 'px'
                } else {
                    // item.style.right = '-' + (item.offsetWidth) + 'px'
                    item.style.right = '-' + (mywidth) + 'px'
                }
                // console.log(document.getElementById('app').offsetWidth)
                if (document.getElementById('app').offsetWidth - parseInt(item.style.right) <= 0 ) {
                    // console.log(666)
                    // item.style.right = '-' + (item.offsetWidth) + 'px'
                    // item.style.right = '-' + (mywidth) + 'px'
                }
            })
        }, 100)
    }
    watchEffect(() => {
        // itemRefs.value.forEach((item, index) => {
        //     // 可以在这里访问每个 DOM 元素
        //     console.log(`Item ${index}:`, item);
        //     if (item.interval) {
        //         clearInterval(item.interval)
        //         mywidth -= item.offsetWidth
        //     }
        //     if (index == 0) {
        //         mywidth = 0
        //     }
        //     item.interval = setInterval(() => {
        //         mywidth += item.offsetWidth
        //         // item.style.right第一次是没有的
        //         if (parseInt(item.style.right)) {
        //             item.style.right = parseInt(item.style.right) + 10 + 'px'
        //         } else {
        //             // item.style.right = '-' + (item.offsetWidth) + 'px'
        //             item.style.right = '-' + (mywidth) + 'px'
        //         }
        //         // console.log(document.getElementById('app').offsetWidth)
        //         console.log(parseInt(item.style.right))
        //         if (document.getElementById('app').offsetWidth - parseInt(item.style.right) <= 0 ) {
        //             console.log(666)
        //             // item.style.right = '-' + (item.offsetWidth) + 'px'
        //             // item.style.right = '-' + (mywidth) + 'px'
        //         }
        //     },100)
        // });
        myf()
    })
    
    console.log(props.messages)
</script>  
    
<style lang="scss" scoped>  
    .danmu-container {  
        position: absolute;
        bottom: 0vw;
        left: 0;
        width: 100vw;
        height: 5vw;
        overflow: hidden;
    }  
        
    .danmu {  
        position: absolute;  
        white-space: nowrap;  
        top: 50%;  
        transform: translateY(-50%);  
        font-size: 18px;  
        box-sizing: border-box;
        padding: 5px 10px;  
        border-radius: 5px;  
        background-color: rgba(255, 255, 255, 0.7);  
        color: #333;  
        will-change: transform;  
    }  
   
</style>